Today’s Agenda

• Review: HTML and Visual Design Basics
• Share our compositions
• Design is for Humans!
• break
• The Structure of a web project
• Adding Style to Your Webpage
• Activity: Getting to Know CSS

What is HTML?

HyperText Markup Language

Defines the structure of our content.

How Do We Write HTML?

HTML is comprised of <tags> </tags>.

Tags wrap around content to create nodes or elements.

HTML enhances our ______. Without ______, the HTML is meaningless.

HTML enhances our content. Without content, the HTML is meaningless.

What is design?

• a plan for achieving a goal

Name 4 techniques that help us focus our users’ attention on specific areas or elements:

1. movement / animation
2. bright colors
3. circles
4. things that are large

How do we make a visual composition feel “pleasing”?

Balance

Design is about making things easy for your users…

…but that doesn’t necessarily mean good designs are simple.

You can’t please everyone with the same design!

Personas

Help us identify and design for our ideal users.

credit: Lin Wang via Medium

Iterate!

Files

index.html

Relative path:

/images/cute-dog-photo.jpg

styles.css

Files that exist inside your project

Absolute path:

https://placekitten.com

http://example.com

Files that are NOT in your project, links to external websites, etc.

HTML Document

All HTML documents need a root <html> element.

We use a <head> section to include metadata about our page:

• language
• title
• icons
• default size settings (for mobile)
• styles
• scripts

The main content of an HTML document goes inside of the <body> tag.

<html>
  <head>
    <!-- metadata about your page goes here -->
  </head>
  <body>
    <!-- All the content you want to display goes here -->
  </body>
</html>

Files that extend the functionality of your html, like CSS and JavaScript files, are included through the <head> of your HTML document.

Cascading Style Sheets

CSS lets you change:

• the font, the size, color, and spacing of your content
• create columns or other layout variations
• add animations and other decorations

How do you CSS?

CSS is about defining rules

h1 {
    color: cornflowerblue;
    font-size: 16px;
}

Rules are composed of:

• selectors
• declarations
• properties
• values

h1 is an example of what we call the selector

Selectors are basically links to elements defined in your html:

• tags
• ids
• classes
• attributes
• pseudo-elements

Tags are just html tags:

<body>
    <h1>Hello World!</h1>
    <p>Isn't it wonderful?</p>
</body>

• h1
• body
• p

Ids are any ids you’ve defined in your html

<div id="topic-1"></div>
<div id="topic-2"></div>

• #topic-1
• #topic-2

Classes are any classes you’ve defined in your html

<p class="green">Green text</p>
<p class="yellow">yellow text</p>

• .green
• .yellow

Rules are composed of:

• selectors
• declarations
• properties
• values

Declarations consist of a property and a value.

Properties are predefined; they are part of the CSS language just like tags are part of the HTML language.

• background-color
• color
• font-size
• margin
• padding

Values are simply the value that we want each property to have.

• color: red;
• font-size: 24px;
• margin: 1em;
• padding: 10%;

Size units can be absolute or fluid

Absolute: we are giving a precise value

font-size: 18px

Fluid: the value is relative to other elements

font-size: 1rem

Fluid units

• em
• rem
• %
• vw
• vh

Can you use absolute and fluid units together in your css?

Flexbox

• It is the standard for controlling layouts across a single dimension (vertical or horizontal).
• It isn’t entirely intuitive.

CSS Grid

• It is the standard for controlling layouts across a single dimension (vertical or horizontal).
• It isn’t entirely intuitive.

stackblitz.com/fork/css-tuj-practice